<template>
  <LayoutHeader class="header">
    <img class="header-logo" src="@/assets/images/logo.png" alt="" />
    <span class="header-product">可信应用创新实验室管理系统</span>
    <span class="header-uname"><Icon name="user" /> {{ username }}</span>
    <a class="header-exit" href="#" @click="layout">
      <Icon name="rollback" /> 退出
    </a>
  </LayoutHeader>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
       username: ''
    }
  },
  mounted() {
    this.username = this.$store.getters.name
  },
  methods: {
    layout() {
       this.$store.dispatch('logOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    }
  }
}
</script>

<style scoped>
  /* Header 区 */
  .header {
    position: relative;
    background: -webkit-linear-gradient(left, #B30000, #E00000, #B30000);
    height: 48px;
    line-height: 48px;
    color: white;
  }
  .header-logo {
    height: 40px;
    margin-top: -5px;
  }
  .header-product {
    margin-left: 10px;
    font-size: 18px;
    font-weight: 550;
  }
  .header-uname, .header-exit {
    display: inline-block;
    position: absolute;
  }
  .header-uname {
    right: 80px;
  }
  a {
    color: white;
    right: 20px;
  }
  .header-uname > svg, .header-exit > svg {
    margin-top: 16px;
  }
</style>
